<template>
  <div class="profile-panel">
    <h3>个人中心</h3>
    <form class="profile-form" @submit.prevent="save">
      <div class="avatar-row">
        <img :src="form.avatar || defaultAvatar" class="avatar" />
        <label class="avatar-upload">
          更换头像
          <input type="file" accept="image/*" @change="onAvatarChange" style="display:none;" />
        </label>
      </div>
      <div class="form-row">
        <label>用户名：</label>
        <input v-model="form.username" required />
      </div>
      <div class="form-row">
        <label>邮箱：</label>
        <input v-model="form.email" type="email" required />
      </div>
      <div class="form-row">
        <label>手机号：</label>
        <input v-model="form.phone" type="tel" />
      </div>
      <div class="form-row">
        <button type="button" class="pwd-btn" @click="showPwd = true">修改密码</button>
        <button type="submit" class="save-btn">保存信息</button>
      </div>
      <div v-if="msg" class="msg">{{ msg }}</div>
    </form>
    <!-- 修改密码弹窗 -->
    <div v-if="showPwd" class="dialog-mask">
      <div class="dialog-box">
        <h4>修改密码</h4>
        <form @submit.prevent="savePwd">
          <div class="form-row">
            <label>原密码：</label>
            <input v-model="pwdForm.old" type="password" required />
          </div>
          <div class="form-row">
            <label>新密码：</label>
            <input v-model="pwdForm.new1" type="password" required />
          </div>
          <div class="form-row">
            <label>确认新密码：</label>
            <input v-model="pwdForm.new2" type="password" required />
          </div>
          <div class="dialog-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" class="cancel-btn" @click="showPwd = false">取消</button>
          </div>
          <div v-if="pwdMsg" class="msg">{{ pwdMsg }}</div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const defaultAvatar = 'https://avatars.githubusercontent.com/u/1?v=4';
const form = ref({
  avatar: '',
  username: 'admin',
  email: 'admin@example.com',
  phone: '13800000000',
});
const msg = ref('');
function onAvatarChange(e) {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = ev => {
    form.value.avatar = ev.target.result;
  };
  reader.readAsDataURL(file);
}
function save() {
  msg.value = '保存成功！';
  setTimeout(() => { msg.value = ''; }, 1500);
}
// 修改密码
const showPwd = ref(false);
const pwdForm = ref({ old: '', new1: '', new2: '' });
const pwdMsg = ref('');
function savePwd() {
  if (!pwdForm.value.old || !pwdForm.value.new1 || !pwdForm.value.new2) {
    pwdMsg.value = '请填写完整';
    return;
  }
  if (pwdForm.value.new1 !== pwdForm.value.new2) {
    pwdMsg.value = '两次新密码不一致';
    return;
  }
  pwdMsg.value = '密码修改成功！';
  setTimeout(() => {
    showPwd.value = false;
    pwdMsg.value = '';
    pwdForm.value = { old: '', new1: '', new2: '' };
  }, 1200);
}
</script>

<style scoped>
.profile-panel {
  max-width: 480px;
  margin: 0 auto;
}
.profile-form {
  background: #f8fafc;
  border-radius: 8px;
  padding: 24px 28px 12px 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.avatar-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 18px;
  border: 2px solid #e3e8ee;
}
.avatar-upload {
  background: #1976d2;
  color: #fff;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
  display: inline-block;
}
.avatar-upload:hover {
  background: #1256a3;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.form-row label {
  width: 70px;
  color: #555;
}
.form-row input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.pwd-btn {
  background: #eee;
  color: #1976d2;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 15px;
  margin-right: 12px;
}
.pwd-btn:hover {
  background: #dbeafe;
}
.save-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.save-btn:hover {
  background: #1256a3;
}
.msg {
  color: #43a047;
  margin-top: 8px;
  font-size: 15px;
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.dialog-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px 18px 32px;
  min-width: 320px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}
.cancel-btn {
  background: #eee;
  color: #333;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
}
.cancel-btn:hover {
  background: #ccc;
}
</style>
